<template>
    <div class="columnar">
        <div class="columnar_tu" :id="id"></div>
    </div>
</template>
  
<script setup>
import { defineProps, onMounted, inject, defineExpose } from 'vue'

const echarts = inject('echarts')

const data = defineProps({
    id: String
})

let chartDom = null
let myChart = null

const setColumnar = (arr) => {
    let option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['图例一', '图例二'],
            right: '0',
            top: '12%',
            icon: 'rect',
            textStyle: {
                color: '#fff'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: arr[0],
            axisLabel: {
                textStyle: {
                    color: '#ffffff'
                }
            }
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, 0.01],
            axisLabel: {
                textStyle: {
                    color: '#ffffff'
                }
            }
        },
        series: [
            {
                name: '图例一',
                type: 'bar',
                barWidth: "20%",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(34, 255, 204, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(34, 255, 204, 0.1)'
                            }
                        ])
                    }
                },
                data: arr[1]
            },
            {
                name: '图例二',
                type: 'bar',
                barWidth: "20%",
                itemStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: 'rgba(0, 124, 255, 1)'
                            },
                            {
                                offset: 1,
                                color: 'rgba(0, 124, 255, 0.1)'
                            }
                        ])
                    }
                },
                data: arr[2]
            }
        ]
    };
    myChart.setOption(option); 
}

defineExpose({ setColumnar })

onMounted(() => {
    chartDom = document.getElementById(data.id);
    myChart = echarts.init(chartDom);
})
</script>

<style lang="scss" scoped>
.columnar {
    width: 100%;
    height: 100%;
    .columnar_tu {
        width: 100%;
        height: 100%;
    }
}
</style>